<!-- 性别边框组件 -->
<template>
	<view class="gender-border" :style="{width: avatarWidth, height: avatarHeight,flexShrink:0}">
		<!-- 自定义宽高头像 -->
		<image mode="aspectFill"
			:class="{'gender-border-none': !gender,'gender-border-male': gender === 1, 'gender-border-female': gender === 2}"
			:src="avatar" :style="{width: avatarWidth, height: avatarHeight,flexShrink:0}" />
		<!-- 相对定位的性别图标 -->
		<view v-if="gender" class="iconfont"
			:style="{bottom:iconBottom,right:iconRight,fontSize:iconSize,width:iconWidth,height:iconHeight,lineHeight:iconLineHeight}"
			:class="{'ic-nan gender-icon-male': gender === 1, 'ic-nv gender-icon-female': gender === 2}">
		</view>
	</view>
</template>

<script>
	export default {
		name: "qmy-gender-border",
		props: {
			gender: {
				type: Number,
				default: 1
			},
			avatar: {
				type: String,
				default: 'https://mp-22f314fc-fd0f-43b9-886e-ac79fe32303c.cdn.bspapp.com/image/default-avatar.jpg'
			},
			avatarWidth: {
				type: String,
				default: '100rpx'
			},
			avatarHeight: {
				type: String,
				default: '100rpx'
			},
			iconBottom: {
				type: String,
				default: '0rpx'
			},
			iconRight: {
				type: String,
				default: '2rpx'
			},
			iconSize: {
				type: String,
				default: '20rpx'
			},
			iconWidth: {
				type: String,
				default: '25rpx'
			},
			iconHeight: {
				type: String,
				default: '25rpx'
			},
			iconLineHeight: {
				type: String,
				default: '25rpx'
			}
		},
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss" scoped>
	.gender-border {
		position: relative;
	}

	.gender-border-none {
		border: none;
		border-radius: 50%;
	}

	.gender-border-male {
		border: 2rpx solid #60adff;
		border-radius: 50%;
	}

	.gender-border-female {
		border: 2rpx solid #ff6d9c;
		border-radius: 50%;
	}

	.gender-avatar {
		border-radius: 50%;
	}

	.gender-icon-male {
		position: absolute;
		text-align: center;
		background-color: #cae3ff;
		border-radius: 4rpx;
		color: #60adff;
	}

	.gender-icon-female {
		position: absolute;
		text-align: center;
		background-color: #ffcbdb;
		border-radius: 4rpx;
		color: #ff6d9c;
	}
</style>